import { Quest } from '@/types/game';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { cn } from '@/lib/utils';
import { 
  ScrollText, 
  Star, 
  Clock, 
  CheckCircle, 
  Coins,
  Zap,
  Gift
} from 'lucide-react';

interface QuestCardProps {
  quest: Quest;
  onAccept?: (quest: Quest) => void;
  onComplete?: (quest: Quest) => void;
  className?: string;
}

const questTypeConfig = {
  main: {
    label: '主线',
    color: 'bg-amber-600 text-slate-900',
    icon: Star,
    borderColor: 'border-amber-500'
  },
  side: {
    label: '支线',
    color: 'bg-blue-600 text-white',
    icon: ScrollText,
    borderColor: 'border-blue-500'
  },
  daily: {
    label: '日常',
    color: 'bg-green-600 text-white',
    icon: Clock,
    borderColor: 'border-green-500'
  }
};

const statusConfig = {
  available: {
    label: '可接受',
    color: 'text-green-400',
    bgColor: 'bg-green-900/20'
  },
  active: {
    label: '进行中',
    color: 'text-blue-400',
    bgColor: 'bg-blue-900/20'
  },
  completed: {
    label: '已完成',
    color: 'text-amber-400',
    bgColor: 'bg-amber-900/20'
  }
};

export function QuestCard({ quest, onAccept, onComplete, className }: QuestCardProps) {
  const typeConfig = questTypeConfig[quest.type];
  const statusInfo = statusConfig[quest.status];
  const TypeIcon = typeConfig.icon;
  
  const progressPercent = quest.maxProgress > 0 ? (quest.progress / quest.maxProgress) * 100 : 0;
  const isCompleted = quest.progress >= quest.maxProgress && quest.status === 'active';

  return (
    <Card className={cn(
      'relative overflow-hidden transition-all duration-200 hover:shadow-lg',
      'bg-slate-800/50 border-slate-700',
      typeConfig.borderColor,
      className
    )}>
      {/* 任务类型标识 */}
      <div className={cn(
        'absolute top-0 right-0 px-3 py-1 rounded-bl-lg',
        typeConfig.color
      )}>
        <div className="flex items-center space-x-1">
          <TypeIcon className="h-3 w-3" />
          <span className="text-xs font-semibold">{typeConfig.label}</span>
        </div>
      </div>

      <CardHeader className="pb-3">
        <div className="flex items-start justify-between pr-16">
          <div className="space-y-1">
            <CardTitle className="text-slate-200 text-lg">{quest.title}</CardTitle>
            <div className="flex items-center space-x-2">
              <Badge 
                variant="outline" 
                className={cn('text-xs', statusInfo.color, statusInfo.bgColor)}
              >
                {statusInfo.label}
              </Badge>
            </div>
          </div>
        </div>
        <CardDescription className="text-slate-400 text-sm leading-relaxed">
          {quest.description}
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* 任务进度 */}
        {quest.status === 'active' && (
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-slate-400">进度</span>
              <span className="text-slate-300">{quest.progress}/{quest.maxProgress}</span>
            </div>
            <Progress value={progressPercent} className="h-2 bg-slate-700">
              <div 
                className={cn(
                  'h-full transition-all duration-500 rounded-full',
                  isCompleted ? 'bg-green-500' : 'bg-blue-500'
                )}
                style={{ width: `${progressPercent}%` }}
              />
            </Progress>
          </div>
        )}

        {/* 任务要求 */}
        {quest.requirements && (
          <div className="space-y-2">
            <h5 className="text-sm font-semibold text-slate-300">任务要求</h5>
            <div className="space-y-1 text-xs text-slate-400">
              {quest.requirements.level && (
                <div className="flex items-center space-x-2">
                  <Star className="h-3 w-3" />
                  <span>等级要求: Lv.{quest.requirements.level}</span>
                </div>
              )}
              {quest.requirements.realm && (
                <div className="flex items-center space-x-2">
                  <Zap className="h-3 w-3" />
                  <span>境界要求: {quest.requirements.realm}级</span>
                </div>
              )}
              {quest.requirements.items && quest.requirements.items.length > 0 && (
                <div className="flex items-center space-x-2">
                  <Gift className="h-3 w-3" />
                  <span>需要物品: {quest.requirements.items.map(item => `${item.quantity}个物品`).join(', ')}</span>
                </div>
              )}
            </div>
          </div>
        )}

        {/* 任务奖励 */}
        <div className="space-y-2">
          <h5 className="text-sm font-semibold text-slate-300">任务奖励</h5>
          <div className="grid grid-cols-2 gap-2 text-xs">
            <div className="flex items-center space-x-2 text-green-400">
              <Zap className="h-3 w-3" />
              <span>经验: +{quest.rewards.experience}</span>
            </div>
            <div className="flex items-center space-x-2 text-amber-400">
              <Coins className="h-3 w-3" />
              <span>金币: +{quest.rewards.gold}</span>
            </div>
            {quest.rewards.items && quest.rewards.items.length > 0 && (
              <div className="col-span-2 flex items-center space-x-2 text-blue-400">
                <Gift className="h-3 w-3" />
                <span>物品奖励: {quest.rewards.items.length} 种</span>
              </div>
            )}
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="pt-2">
          {quest.status === 'available' && onAccept && (
            <Button
              onClick={() => onAccept(quest)}
              className="w-full bg-green-600 hover:bg-green-700 text-white"
            >
              <ScrollText className="h-4 w-4 mr-2" />
              接受任务
            </Button>
          )}
          
          {quest.status === 'active' && !isCompleted && (
            <Button
              disabled
              variant="outline"
              className="w-full border-slate-600 text-slate-400"
            >
              <Clock className="h-4 w-4 mr-2" />
              进行中...
            </Button>
          )}
          
          {quest.status === 'active' && isCompleted && onComplete && (
            <Button
              onClick={() => onComplete(quest)}
              className="w-full bg-amber-600 hover:bg-amber-700 text-slate-900"
            >
              <CheckCircle className="h-4 w-4 mr-2" />
              完成任务
            </Button>
          )}
          
          {quest.status === 'completed' && (
            <Button
              disabled
              variant="outline"
              className="w-full border-green-600 text-green-400 bg-green-900/20"
            >
              <CheckCircle className="h-4 w-4 mr-2" />
              已完成
            </Button>
          )}
        </div>
      </CardContent>
    </Card>
  );
}